<template>
  <div class="post-container">
    <div class="page-header">
      <h1 class="page-title">发布岗位需求</h1>
      <p class="page-subtitle">发布您的招聘需求，吸引优秀人才</p>
    </div>

    <el-card class="post-form-card">
      <template #header>
        <div class="form-header">
          <h2>需求信息</h2>
          <p>请填写详细的岗位需求信息</p>
        </div>
      </template>

      <el-form 
        ref="postFormRef"
        :model="postForm"
        :rules="postRules"
        label-width="140px"
        class="post-form"
      >
        <!-- 基本信息 -->
        <div class="form-section">
          <h3 class="section-title">基本信息</h3>
          
          <div class="form-row">
            <div class="form-column">
              <el-form-item label="岗位名称" prop="positionName">
                <el-input 
                  v-model="postForm.positionName"
                  placeholder="请输入岗位名称"
                  maxlength="50"
                  show-word-limit
                />
              </el-form-item>
            </div>
            
            <div class="form-column">
              <el-form-item label="岗位类型" prop="positionType">
                <el-select
                  v-model="postForm.positionType"
                  placeholder="请选择岗位类型"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in positionTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </div>
          </div>

          <div class="form-row">
            <div class="form-column">
              <el-form-item label="工作地点" prop="workLocation">
                <el-input 
                  v-model="postForm.workLocation"
                  placeholder="请输入工作地点"
                  maxlength="100"
                />
              </el-form-item>
            </div>
            
            <div class="form-column">
              <el-form-item label="招聘人数" prop="recruitCount">
                <el-input-number
                  v-model="postForm.recruitCount"
                  :min="1"
                  :max="100"
                  placeholder="请输入招聘人数"
                  style="width: 100%"
                />
              </el-form-item>
            </div>
          </div>
        </div>

        <!-- 薪资福利 -->
        <div class="form-section">
          <h3 class="section-title">薪资福利</h3>
          
          <div class="form-row">
            <div class="form-column">
              <el-form-item label="薪资范围" prop="salaryRange">
                <el-input 
                  v-model="postForm.salaryRange"
                  placeholder="如：8k-12k/月 或 面议"
                  maxlength="50"
                />
              </el-form-item>
            </div>
            
            <div class="form-column">
              <el-form-item label="薪资类型" prop="salaryType">
                <el-select
                  v-model="postForm.salaryType"
                  placeholder="请选择薪资类型"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in salaryTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </div>
          </div>

          <el-form-item label="福利待遇" prop="benefits">
            <el-input 
              v-model="postForm.benefits"
              type="textarea"
              :rows="3"
              placeholder="请描述福利待遇，如：五险一金、年终奖、带薪年假等"
              maxlength="500"
              show-word-limit
            />
          </el-form-item>
        </div>

        <!-- 岗位要求 -->
        <div class="form-section">
          <h3 class="section-title">岗位要求</h3>
          
          <div class="form-row">
            <div class="form-column">
              <el-form-item label="学历要求" prop="education">
                <el-select
                  v-model="postForm.education"
                  placeholder="请选择学历要求"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in educationOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </div>
            
            <div class="form-column">
              <el-form-item label="工作经验" prop="experience">
                <el-select
                  v-model="postForm.experience"
                  placeholder="请选择工作经验要求"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in experienceOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </div>
          </div>

          <el-form-item label="技能要求" prop="skills">
            <el-input 
              v-model="postForm.skills"
              type="textarea"
              :rows="3"
              placeholder="请描述技能要求，如：熟悉Vue.js、React等前端框架"
              maxlength="500"
              show-word-limit
            />
        </el-form-item>

          <el-form-item label="语言要求" prop="language">
            <el-select
              v-model="postForm.language"
              multiple
              placeholder="请选择语言要求"
              style="width: 100%"
            >
              <el-option
                v-for="item in languageOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
          </el-select>
        </el-form-item>
        </div>

        <!-- 岗位描述 -->
        <div class="form-section">
          <h3 class="section-title">岗位描述</h3>
          
          <el-form-item label="工作职责" prop="responsibilities">
            <el-input 
              v-model="postForm.responsibilities"
              type="textarea"
              :rows="4"
              placeholder="请详细描述工作职责"
              maxlength="1000"
              show-word-limit
            />
          </el-form-item>

          <el-form-item label="任职要求" prop="requirements">
            <el-input 
              v-model="postForm.requirements"
              type="textarea"
              :rows="4"
              placeholder="请详细描述任职要求"
              maxlength="1000"
              show-word-limit
            />
          </el-form-item>
        </div>

        <!-- 联系方式 -->
        <div class="form-section">
          <h3 class="section-title">联系方式</h3>
          
          <div class="form-row">
            <div class="form-column">
              <el-form-item label="联系人" prop="contactPerson">
                <el-input 
                  v-model="postForm.contactPerson"
                  placeholder="请输入联系人姓名"
                  maxlength="20"
                />
        </el-form-item>
            </div>
            
            <div class="form-column">
              <el-form-item label="联系电话" prop="contactPhone">
                <el-input 
                  v-model="postForm.contactPhone"
                  placeholder="请输入联系电话"
                  maxlength="20"
                />
        </el-form-item>
            </div>
          </div>

          <el-form-item label="联系邮箱" prop="contactEmail">
            <el-input 
              v-model="postForm.contactEmail"
              placeholder="请输入联系邮箱"
              type="email"
            />
        </el-form-item>
        </div>

        <!-- 提交按钮 -->
        <div class="form-actions">
          <el-button 
            type="primary" 
            size="large"
            :loading="submitting"
            @click="submitPost"
          >
            {{ submitting ? '发布中...' : '发布需求' }}
          </el-button>
          <el-button size="large" @click="resetForm">重置</el-button>
          <el-button size="large" @click="goToHome">返回首页</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 响应式数据
const postFormRef = ref()
const submitting = ref(false)

// 表单数据
const postForm = reactive({
  positionName: '',
  positionType: '',
  workLocation: '',
  recruitCount: 1,
  salaryRange: '',
  salaryType: '',
  benefits: '',
  education: '',
  experience: '',
  skills: '',
  language: [],
  responsibilities: '',
  requirements: '',
  contactPerson: '',
  contactPhone: '',
  contactEmail: ''
})

// 表单验证规则
const postRules = {
  positionName: [
    { required: true, message: '请输入岗位名称', trigger: 'blur' },
    { min: 2, max: 50, message: '岗位名称长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  positionType: [
    { required: true, message: '请选择岗位类型', trigger: 'change' }
  ],
  workLocation: [
    { required: true, message: '请输入工作地点', trigger: 'blur' }
  ],
  recruitCount: [
    { required: true, message: '请输入招聘人数', trigger: 'blur' }
  ],
  salaryRange: [
    { required: true, message: '请输入薪资范围', trigger: 'blur' }
  ],
  salaryType: [
    { required: true, message: '请选择薪资类型', trigger: 'change' }
  ],
  education: [
    { required: true, message: '请选择学历要求', trigger: 'change' }
  ],
  experience: [
    { required: true, message: '请选择工作经验要求', trigger: 'change' }
  ],
  responsibilities: [
    { required: true, message: '请输入工作职责', trigger: 'blur' },
    { min: 10, max: 1000, message: '工作职责长度在 10 到 1000 个字符', trigger: 'blur' }
  ],
  requirements: [
    { required: true, message: '请输入任职要求', trigger: 'blur' },
    { min: 10, max: 1000, message: '任职要求长度在 10 到 1000 个字符', trigger: 'blur' }
  ],
  contactPerson: [
    { required: true, message: '请输入联系人', trigger: 'blur' }
  ],
  contactPhone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  contactEmail: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ]
}

// 选项数据
const positionTypeOptions = [
  { value: 'tech', label: '技术' },
  { value: 'market', label: '市场' },
  { value: 'sales', label: '销售' },
  { value: 'operation', label: '运营' },
  { value: 'design', label: '设计' },
  { value: 'product', label: '产品' },
  { value: 'finance', label: '财务' },
  { value: 'hr', label: '人力资源' },
  { value: 'other', label: '其他' }
]

const salaryTypeOptions = [
  { value: 'monthly', label: '月薪' },
  { value: 'yearly', label: '年薪' },
  { value: 'hourly', label: '时薪' },
  { value: 'negotiable', label: '面议' }
]

const educationOptions = [
  { value: 'high_school', label: '高中' },
  { value: 'college', label: '大专' },
  { value: 'bachelor', label: '本科' },
  { value: 'master', label: '硕士' },
  { value: 'phd', label: '博士' },
  { value: 'no_requirement', label: '不限' }
]

const experienceOptions = [
  { value: 'no_experience', label: '无经验' },
  { value: '1_year', label: '1年以下' },
  { value: '1_3_years', label: '1-3年' },
  { value: '3_5_years', label: '3-5年' },
  { value: '5_10_years', label: '5-10年' },
  { value: '10_years_plus', label: '10年以上' }
]

const languageOptions = [
  { value: 'chinese', label: '中文' },
  { value: 'english', label: '英语' },
  { value: 'japanese', label: '日语' },
  { value: 'korean', label: '韩语' },
  { value: 'french', label: '法语' },
  { value: 'german', label: '德语' },
  { value: 'spanish', label: '西班牙语' },
  { value: 'other', label: '其他' }
]

// 提交表单
const submitPost = async () => {
  try {
    const valid = await postFormRef.value.validate()
    
    if (!valid) {
      ElMessage.error('请检查表单信息，确保所有必填项都已填写')
      return
    }
    
    submitting.value = true
    
    // 获取用户ID
    const userId = localStorage.getItem('user_id')
    if (!userId) {
      ElMessage.error('用户信息获取失败，请重新登录')
      router.push('/login')
      return
    }
    
    // 构建提交数据
    const postData = {
      enterpriseUserId: parseInt(userId),
      positionName: postForm.positionName,
      positionType: postForm.positionType,
      workLocation: postForm.workLocation,
      recruitCount: postForm.recruitCount,
      salaryRange: postForm.salaryRange,
      salaryType: postForm.salaryType,
      benefits: postForm.benefits,
      education: postForm.education,
      experience: postForm.experience,
      skills: postForm.skills,
      language: postForm.language.join(', '),
      responsibilities: postForm.responsibilities,
      requirements: postForm.requirements,
      contactPerson: postForm.contactPerson,
      contactPhone: postForm.contactPhone,
      contactEmail: postForm.contactEmail
    }
    
    
    
    // 发送请求
    const response = await fetch('/api/api/v1/enterprise/demand/post', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${localStorage.getItem('access_token')}`
      },
      body: JSON.stringify(postData)
    })
    
    const result = await response.json()
    
    if (response.ok && result.code === 'SUCCESS') {
      ElMessage.success(result.message || '需求发布成功')
      resetForm()
    } else {
      ElMessage.error(result.message || '发布失败，请重试')
    }
  } catch (error) {
    console.error('发布需求失败:', error)
    ElMessage.error('网络错误，请稍后重试')
  } finally {
    submitting.value = false
  }
}

// 重置表单
const resetForm = () => {
  postFormRef.value?.resetFields()
  Object.assign(postForm, {
    positionName: '',
    positionType: '',
    workLocation: '',
    recruitCount: 1,
    salaryRange: '',
    salaryType: '',
    benefits: '',
    education: '',
    experience: '',
    skills: '',
    language: [],
    responsibilities: '',
    requirements: '',
    contactPerson: '',
    contactPhone: '',
    contactEmail: ''
  })
}

// 返回首页
const goToHome = () => {
  router.push({ name: 'enterprise-home' })
}

// 生命周期
onMounted(() => {
  
})
</script>

<style scoped>
/* 页面内容样式 */
.post-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.page-header {
  text-align: left;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #EBEEF5;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 10px;
}

.page-subtitle {
  font-size: 16px;
  color: #606266;
}

.post-form-card {
  margin-bottom: 30px;
  border: none;
  box-shadow: none;
}

.form-header {
  text-align: left;
  padding-bottom: 20px;
  border-bottom: 1px solid #EBEEF5;
}

.form-header h2 {
  margin: 0 0 10px 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.form-header p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.post-form {
  margin-top: 20px;
}

.form-section {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #EBEEF5;
}

.form-section:last-child {
  border-bottom: none;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 3px solid #409EFF;
}

.form-row {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
}

.form-column {
  flex: 1;
}

.form-column :deep(.el-form-item) {
  margin-bottom: 20px;
}

.form-column :deep(.el-form-item__label) {
  font-weight: 500;
  color: #303133;
}

.form-column :deep(.el-input__wrapper) {
  border-radius: 4px;
}

.form-column :deep(.el-select) {
  width: 100%;
}

.form-actions {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #EBEEF5;
}

.form-actions .el-button {
  margin: 0 10px;
  padding: 12px 24px;
  font-size: 16px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}
</style> 